---
type: tutorial
unitTitle: Crea y despliega tu primer sitio Astro
title: 'Check in: Unidad 1 - Configuración'
i18nReady: true
description: >-
  Tutorial: Crea tu primer blog con Astro —
  Prepara tu entorno de desarrollo, crea y despliega tu primer sitio Astro
  sitio
head:
  - tag: title
    content: 'Tutorial: Crea un blog — Unidad 1: Configuración | Docs'
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya sabes lo que vas a construir, ¡es hora a preparar todas las herramientas que vas a necesitar! 

Esta unidad te muestra cómo configurar tu entorno de desarrollo y desplegar en Netlify. Pasa a la [Unidad 2](/es/tutorial/2-pages/) si ya te sientes cómodo con tu entorno y flujo de trabajo.

:::tip[Haz el tutorial en un editor de código en línea]

¿Quieres completar este tutorial en un editor de código en línea? Sigue las instrucciones a continuación para comenzar en Google IDX.

<details>
<summary>Usando Google IDX: ¡Sigue estas instrucciones y luego ve directamente a la Unidad 2!</summary>

**Configurar IDX**

<Steps>
1. Sigue el enlace externo para [abrir la plantilla “Empty Project” en un nuevo espacio de trabajo en IDX](https://astro.new/minimal?on=idx).

2. Sigue la indicación para iniciar sesión con tu cuenta de Google si aún no lo has hecho.

3. Ingresa un nombre para tu proyecto si deseas cambiarlo del predeterminado “Empty Project”. Haz clic en **Create**.

4. Espera a que se cree el espacio de trabajo. Esto puede tardar entre 30 y 60 segundos. Si todo va bien, verás el proyecto de Astro cargado en un editor de código en línea.

5. Espera a que IDX ejecute dos scripts: uno para instalar Astro y otro para iniciar el servidor de desarrollo. Ten en cuenta que puede aparecer brevemente un mensaje indicando que tu espacio de trabajo “no pudo encontrar Astro” si este se carga antes de que la instalación haya finalizado. Este mensaje puede ignorarse y cerrarse si no desaparece automáticamente.
</Steps>

**Haz un cambio**

Si todo va bien, deberías ver el código del archivo `src/pages/index.astro` abierto en pantalla dividida junto con una vista previa en vivo del sitio web. Sigue la instrucción para ["Escribir tu primera línea de Astro"](/es/tutorial/1-setup/3/) y realiza un cambio en este archivo.

**Crea un repositorio de GitHub**

<Steps>
1. Ve al elemento de navegación **“Source Control”** en la barra de menú vertical, o ábrelo con <kbd>CTRL + SHIFT + G</kbd>.

2. Selecciona la opción **Publicar en GitHub**. Esto creará un nuevo repositorio en tu cuenta de GitHub.
3. Sigue las indicaciones para iniciar sesión en tu cuenta de GitHub.
4. Una vez que hayas iniciado sesión, regresa a la pestaña de IDX y se te dará la opción de nombrar tu nuevo repositorio y decidir si quieres que sea privado o público. Puedes elegir cualquier nombre y tipo de repositorio para este tutorial.
5. IDX realizará un *commit* inicial y publicará el proyecto en tu nuevo repositorio de GitHub.
6. A partir de ahora, cada vez que tengas cambios para enviar a GitHub, el ícono de **Source Control** mostrará un número. Este indica la cantidad de archivos que han cambiado desde tu último *commit*. Navega a esta pestaña y realiza dos pasos (*commit* y *publish*) para ingresar un mensaje de *commit* y actualizar tu repositorio."
</Steps>

**Despliega tu sitio**

Si deseas implementar tu sitio en Netlify y tener una versión publicada en línea mientras trabajas, continúa en la Unidad 1 con [Despliega tu sitio en la web](/es/tutorial/1-setup/5/).

De lo contrario, salta a la [Unidad 2](/es/tutorial/2-pages/) para comenzar a crear con Astro.

</details>

{/* StackBlitz instructions
<details>
<summary>Usando StackBlitz: Sigue estas instrucciones y pasa directamente a la Unidad 2.</summary>

**Configura StackBlitz**

<Steps>
1. Visita [astro.new](https://astro.new) y haz clic en el botón para abrir la plantilla "Proyecto vacío" en StackBlitz. 

2. Haz clic en "Iniciar sesión" en la parte superior derecha para iniciar sesión con tus credenciales de GitHub.

3. En la parte superior izquierda de la ventana del editor StackBlitz, haz clic para hacer un "fork" de la plantilla (guardar en el panel de tu propia cuenta).

4. Espera a que se cargue el proyecto y verás una vista previa en vivo del inicio del "Proyecto vacío".
</Steps>

**Haz un cambio**

En el panel de archivos, deberías ver `src/pages/index.astro`. Haz clic para abrirlo, y sigue [Escribe tu primera línea de Astro](/es/tutorial/1-setup/3/) para hacer un cambio en este archivo.

**Crea un repositorio GitHub**

<Steps>
1. Presiona el botón <kbd>Connect Repository</kbd> en la parte superior de la lista de archivos, ingresa un nombre para dicho repositorio y haz clic en <kbd>Create Repo & push</kbd>. 

2. Cuando tengas cambios para confirmar en GitHub, aparecerá un botón "Commit" en la parte superior izquierda de tu espacio de trabajo. Al hacer clic en él, podrás introducir un mensaje de confirmación y actualizar tu repositorio.
</Steps>

**Despliega tu sitio**
Si quieres desplegar tu sitio en Netlify, pasa a [Despliega tu sitio en la web](/es/tutorial/1-setup/5/).


¡Si no, pasa a [Unidad 2](/es/tutorial/2-pages/) para empezar a construir con Astro!

</details>
*/}
:::

## ¿A dónde vas?

En esta unidad, **crearás un nuevo proyecto** que estará **almacenado online en GitHub** y **conectado a Netlify**. 

A medida que escribas código, enviarás periódicamente tus cambios a GitHub. Netlify utilizará los archivos de tu repositorio de GitHub para construir tu sitio web, y luego lo publicarás en Internet en una dirección única donde cualquiera podrá verlo.

Cada vez que envíes un cambio a GitHub, se enviará una notificación a Netlify. Entonces, Netlify automáticamente reconstruirá y volverá a publicar tu sitio en vivo para reflejar esos cambios.



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] ¡Estoy listo para preparar un entorno de desarrollo para un proyecto de Astro!
</Checklist>
</Box>
